<template>
	<view class="main">
    <u-sticky>
      <subAccountQualificationAddStep :step="0"/>
    </u-sticky>
    <view class="content">
      <view class="title">请选择商户类型</view>
      <view class="list u-flex-row">
        <view class="item" v-for="(item, index) of merchantTypeList" :key="index"  @click="typeClick(index, item.id)"
        :class="merchantTypeSelectedIndex == index ? 'item-selected' : 'item-unselect'" >{{item.name}}</view>
      </view>

      <view class="title title-level-2">您需要绑定的储蓄卡账户类型是哪种</view>
      <view class="list u-flex-row">
        <view class="item" v-for="(item, index) of accountTypeList" :key="index" @click="debitCardTypeClick(index, item.id)"
              :class="accountTypeSelectedIndex == index ? 'item-selected' : 'item-unselect'">{{item.name}}</view>
      </view>
    </view>

    <view class="u-m-t-93">
      <u-button type="primary" text="下一步" :customStyle="nextStepBtnCustomStyle" @click="warmReminderShow=true"></u-button>
    </view>

    <u-popup :show="warmReminderShow" mode="center" :customStyle="{width: '680rpx', backgroundColor:'#fff'}"
             round="20rpx" :closeable="true" :closeOnClickOverlay="true" @close="warmReminderClose">
      <view class="header u-flex u-row-start">
        <view class="header-title">温馨提醒</view>
        <u--image class="header-icon" :showLoading="true" :src="`${baseStaticFileUrl}/image/pages-qualification/warm-reminder.png`" width="194rpx" height="150rpx"/>
      </view>
      <view class="header-content">
        <view class="content-t">请准备以下资料信息</view>

        <view class="content-item" v-for="(item, index) of warmReminderList" :key="index" v-if="index!=1 || merchantTypeSelectedIndex!=0">
          <view class="content-item-t u-flex-row">
            <u-icon :name="item.icon" :color="item.color" size="22"></u-icon>
            <view class="u-m-l-6">{{item.title}}</view>
          </view>

          <view class="content-item-desc">
            {{item.desc}}
            <text v-if=" merchantTypeSelectedIndex==2 && accountTypeSelectedIndex==1">{{item.openingPermit}}</text>
          </view>
        </view>

        <view class="bottom-check">
          <u-radio-group v-model="consent" @change="consentChange">
            <u-radio activeColor="#6072FF" shape="circle" label=" " name="ok"/>
            <view @click="consentClick()">
              <text>阅读并同意</text>
              <text class="agreement-extrude" @tap.stop="cat('/pages-agreement-or-policy/protocolOfUsage')">《用户使用协议》</text>
              <text>与</text>
              <text class="agreement-extrude" @tap.stop="cat('/pages-agreement-or-policy/privacyPolicy')">《隐私政策》</text>
            </view>
          </u-radio-group>
        </view>

      </view>

      <u-button type="primary" text="我已准备好" :customStyle="warmReminderBtnCustomStyle" @click="nav()"></u-button>
    </u-popup>
	</view>
</template>

<script>
  import merchantDetail from '@/common/po/merchant-detail.ts'
	import subAccountQualificationAddStep from '@/components/qualification-add-step/sub-account-qualification-add-step';
	export default {
    components: {
      subAccountQualificationAddStep
    },
		data() {
			return {
        baseStaticFileUrl: this.$configPath.staticFileUrl,
        merchantTypeList: [],
        accountTypeList: [],

        merchantTypeSelectedIndex: 1,
        accountTypeSelectedIndex: 0,
        nextStepBtnCustomStyle: {
          width: '690rpx',
          height: '88rpx',
          borderRadius: '120px',
          color: '#fff',
          margin: '14rpx auto 74rpx',
        },
		    toUrl: '/pages-qualification/sub-account-qualification/add/base-info',
        warmReminderShow: false,

        warmReminderList: [
          {
            icon: 'file-text',
            color: '#40CF88',
            title: '基础信息',
            desc: '法人身份证、法人银行卡、银行卡开户地区',
          },
          {
            icon: 'list-dot',
            color: '#FF9B00',
            title: '经营信息',
            desc: '营业执照',
            openingPermit:'、开户许可证'
          },
          // {
          //   icon: 'map',
          //   color: '#6072FF',
          //   title: '场地信息',
          //   desc: '法人手持身份证照片',
          // },
        ],

        warmReminderBtnCustomStyle: {
          width: '376rpx',
          height: '88rpx',
          borderRadius: '120px',
          color: '#fff',
          marginBottom: '50rpx',
        },

        merchantDetail: merchantDetail,
        consent: '',
        consentBool: false,
			};
		},
    onShow() {},
    onLoad(options){
      this.merchantTypeList.length = 0;
      this.merchantTypeList.push(this.$merchantTypeEnum.PERSON)
      this.merchantTypeList.push(this.$merchantTypeEnum.INDIVIDUAL_HOUSEHOLD)
      this.merchantTypeList.push(this.$merchantTypeEnum.LIMITED_COMPANY)
      this.accountTypeList = this.merchantTypeList[1].accountTypeList;
      this.merchantDetail.merchantType = this.merchantTypeList[1].id;
      this.merchantDetail.accountType = this.accountTypeList[0].id;

      if (options.merchant){
        // 编辑商户信息，重新提交
        this.initData(JSON.parse(decodeURIComponent(options.merchant)));
      } else {
        this.getUncommittedMerchantInfo();
      }
      uni.$on('updateMerchantInfo-baseInfo', this.onBaseInfo)
    },
    onUnload(){
      this.updateUncommittedMerchantInfo(false, this.merchantDetail)
    },
    methods: {
      consentChange(e){
        if (this.consentBool){
          this.consent = '';
          this.consentBool = false
        } else {
          this.consent = e
          this.consentBool = true
        }
      },

      consentClick(){
        if (this.$u.test.isEmpty(this.consent)){
          this.consent = 'ok'
          this.consentBool = true
        } else {
          this.consent = '';
          this.consentBool = false
        }
      },

      onBaseInfo(e){
        this.updateUncommittedMerchantInfo(false, e.data)
        this.initData(e.data);
      },

      // 读出缓存就初始上一次的选择
      initData(item){
        this.merchantDetail = item;
        console.log("this.merchantDetail", this.merchantDetail)
        if (!this.$u.test.isEmpty(item.merchantType)){
          for (let i = 0; i < this.merchantTypeList.length; i++) {
            if (item.merchantType == this.merchantTypeList[i].id){
              this.merchantTypeSelectedIndex = i;
              this.accountTypeList = this.merchantTypeList[i].accountTypeList;
              break;
            }
          }
        } else {
          this.merchantDetail.merchantType = "01";
        }
        if (!this.$u.test.isEmpty(item.accountType)){
          for (let i = 0; i < this.accountTypeList.length; i++) {
            console.log(item.accountType + "-" + this.accountTypeList[i].id)
            if (item.accountType == this.accountTypeList[i].id){
              this.accountTypeSelectedIndex = i;
              break;
            }
          }
        } else {
          this.merchantDetail.accountType = "01";
        }
      },

      warmReminderClose(){
        this.warmReminderShow = false;
      },

      // 获取上一次选择的记录
      getUncommittedMerchantInfo(){


        this.$api('merchant.getUncommittedSubAccountMerchantInfo', null).then(res => {
          if (res.status == 0) {
            if (!this.$u.test.isEmpty(res.data)){
              this.initData(res.data);
            }
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 更新记录
      updateUncommittedMerchantInfo(isNav, data){
		    var that = this;
        this.$api('merchant.updateUncommittedSubAccountMerchantInfo', data).then(res => {
          if (res.status == 0) {
            if (isNav){
			        uni.hideLoading();
              uni.navigateTo({
                url: that.toUrl,
                fail: function(res) {
                	getApp().err("跳转下一步失败:" + res.errMsg)
                }
              })
            }
          } else {
            getApp().err("信息提交不成功：" + res.msg)
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      cat(u){
        uni.navigateTo({
          url:u,
          success: function(res) {}
        })
      },

      nav(){
        if (!this.consentBool){
          this.$helpers.toast('请阅读并同意《用户使用协议》、《隐私政策》');
          return
        }

        this.warmReminderShow = false

        if (this.$u.test.isEmpty(this.merchantDetail.merchantType)){
          this.$helpers.toast('获取进件类型不成功，请重新选择');
          return
        }
        if (this.$u.test.isEmpty(this.merchantDetail.accountType)){
          this.$helpers.toast('获取账户类型不成功，请重新选择');
          return
        }
		    uni.showLoading();
        this.updateUncommittedMerchantInfo(true, this.merchantDetail)
      },

      typeClick(index, id){
        this.merchantTypeSelectedIndex = index;
        this.merchantDetail.merchantType = id;
        this.accountTypeSelectedIndex = 0;
        this.accountTypeList = this.merchantTypeList[index].accountTypeList;
        this.merchantDetail.accountType = this.accountTypeList[0].id;
      },

      debitCardTypeClick(index, id){
        this.accountTypeSelectedIndex = index;
        this.merchantDetail.accountType = id;
      }
    }
	}
</script>

<style lang="scss">
.main{
  box-sizing: border-box;

  .header{
    width: 100%;
    height: 170rpx;
    background: linear-gradient(rgba(215,229,247,1) 0%,rgba(251,253,255,0) 100%);
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    .header-title{
      margin-left: 138rpx;
      font-size: $f-xl;
      margin-right: 82rpx;
    }
  }

  .header-content{
    padding: 0 30rpx 40rpx;

    .content-t{
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.8);
      margin-bottom: 22rpx;
    }

    .content-item{
      font-size: $f-base;
      margin-bottom: 36rpx;

      .content-item-t{
        color: rgba(0, 0, 0, 0.8);
      }

      .content-item-desc{
        margin-left: 50rpx;
        color: rgb(0, 0, 0);
      }
    }

    .bottom-check {
      margin-top: 80rpx;
      display: flex;
      font-size: $f-base;
      color: #000;

      .agreement-extrude{
        color: $u-primary;
      }
    }

  }

  .content{
    padding: 30rpx 30rpx;
    background-color: $uni-bg-color;

    .title{
      font-size: $f-lg;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 20rpx;
    }

    .title-level-2{
      margin-top: 74rpx;
    }

    .list{

      .item{
        padding: 15rpx 30rpx;
        font-size: $f-sm;
        border-radius: 6rpx;
        margin-right: 24rpx;
        position: relative;
      }

      .item-selected{
        border: 1rpx solid $u-primary;
        color: $u-primary;
      }

      .item-unselect{
        border: 1px solid rgb(224, 224, 224);
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
